<template>
  <div class="manual-href">
    <div class="content">
      <div style="margin-bottom: 10px;">请手动输入（回车键回显确定）：</div>
      <el-input v-model="inputModel" placeholder="例如：https://www.baidu.com" @blur="handleBlur" @keydown="handleKeydown">
        <template #prepend>
          url
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ILink} from "@/components/hrefSelector/types";

const props = defineProps<{
  modelValue: ILink;
}>();

const emits = defineEmits<{
  (e: "done", value: string): void
}>()

const inputModel = ref("");

const handleBlur = () => {
  emits("done", inputModel.value);
}

const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === "Enter") {
    emits("done", inputModel.value);
  }
}

onMounted(() => {
  inputModel.value = props.modelValue.url;
})
</script>

<style scoped lang="scss">
@use "../styles/index.scss";
</style>
